<template>
	<view>
		<view @click="toAddressList" class="address_container f-nw" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/dizhi.png?sign=72f029222d0656bc3e791e5231d34418&t=1606369757')" catchtap="to_address" v-if="address_list.length>0">
		  <view class="address-icon-wrap">
		    <view class="icon" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/dizhiicon.png?sign=03d82f1042c3dcc21a5f9da82348bd28&t=1606370349')"></view>
		  </view>
		  <view class="address-context">
		    <view class="f-nw">
		      <view style="margin-left:10rpx">收货人：{{address_list[0].username}}</view>
		      <view class="address-phone">{{address_list[0].phone}}</view>
		    </view>
		    <view class="address-address">
		      收货地址：{{address_list[0].province}}{{address_list[0].city}}{{address_list[0].area}}{{address_list[0].address}}
		    </view>
		  </view>
		</view>
		<view v-else  @click="toAddressList"  class="address_container f-c"  style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/dizhi.png?sign=72f029222d0656bc3e791e5231d34418&t=1606369757')" catchtap="to_address">
		  <view class="f-c to_address">+添加地址</view>
		</view>
        <!-- 商品 -->
        <view class="goods-box" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/zhifudizhi.png?sign=a026377e059e279b3198a5356ea0c9f7&t=1606371221')">
          <view class="goods">
            <image class="goodsimg" :src="info.img_url"></image>
            <view class="goodsright">
              <view class="goodstext">{{info.goods_name}}</view>
              <view class="goodsmoney">￥{{info.price}}</view>
            </view>
          </view>
        </view>
        <view class="operation">
          <view> 合计：
            <text class="commodity-sum-price">￥{{info.price}}</text> </view>
          <view class="pay" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/zhifu.png?sign=8714c9e7783f68d318bdab5628c50f42&t=1606374354')" @click="pay"></view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address_list: [],
                goodslist: {},
                info: {},
			}
		},
		methods: {
			toAddressList() {
                uni.navigateTo({
                    url: "../addressList/addressList"
                })
            },
            pay() {
                let goods = [{
                  "aid": 14,
                  "express": 0,
                  "message": "无",
                  "coupon": "2",
                  "money": this.info.price,
                  "list": [{
                    "goods_id": this.info.goods_id,
                    "goods_sku_id": this.info.goods_sku_id,
                    "num": "1",
                    "live_id": "1",
                    "is_collect": "0",
                    "share_id": "0",
                    "live_room_id": "0",
                    "goods_cart_id": "0"
                  }]
                }]
                this.$api.payment({
                    address_id: this.address_list[0].id,
                    goods: JSON.stringify(goods),
                    money: this.info.price*1,
                    uid: uni.getStorageSync("uid"),
                    is_guess: 1,
                    operation: '',
                    activity_id:this.info.activity_id,
                    order_type:this.info.activity_type
                },{loading: true}).then(res=>{
                    WeixinJSBridge.invoke("getBrandWCPayRequest", {
                        ...res.data
                    },(res)=>{
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                          uni.showToast({
                              title: "支付成功，将跳转订单页面"
                          })
                          setTimeout(()=>{
                              uni.navigateTo({
                                  url: "/pages/orderList/orderList"
                              })
                          },500)
                      }
                    })
                }).catch(err=>{
                    console.log(err)
                })
            }
		},
        onLoad({item}) {
            this.info = JSON.parse(item);
        },
        onShow() {
            this.$api.getUserAddressList().then(res=>{
                this.address_list = res.data;
            })
        }
	}
</script>

<style>
/* pages/order/createOrder/createOrder.wxss */
/* pages/order/orderDetails/orderDetails.wxss */
page{
 
  background: linear-gradient(0deg, #60CC60 0%, #79E379 100%);
    height: 100%;
  }
  .order_details{
    padding-bottom: 88rpx;
    margin-bottom: 20rpx;
    height: 100%;
      position: fixed;
      width: 100%;
  }
  .steps .van-step__title{
    text-align: center
  }
  .goods-box{
    width: 95%;
    height: 250rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 14rpx auto;
    padding-top: 50rpx;
  }
  .goods{
    height: 180rpx;
    width: 92%;
    border-radius: 16rpx;
    padding: 10rpx;
   
  }
  
  .goodsimg{
    width: 180rpx;
    height: 180rpx;
    background-color: #f1f1f1;
    float: left;
    margin-left: 30rpx;
    border-radius: 10rpx;
  }
  .goodsright{
    width: 420rpx;
    height: 180rpx;
    margin-left: 10rpx;
    float: right;
  
  }
  .goodstext{
    font-size: 30rpx;
    color: #555;
   height: 120rpx;
  }
  .goodsmoney{
    color: red;
    width: 100%;
  }
  .icon{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  /* 地址 */
  .address_container{
    margin: 20rpx auto  0;
    padding: 20rpx;
    box-sizing: border-box;
    align-items: flex-start;
    width: 95%;
    height: 200rpx;
    background-repeat: no-repeat;
    background-size:100% 100%;
    
  }
  .address-icon-wrap{
    width: 60rpx;
    height: 60rpx;
    margin: 50rpx 20rpx;
  }
  .address_container .address-context{
    font-size: 28rpx;
    color: #333;
    margin-top: 30rpx;
  }
  
  .address_container .address-address{
    font-size: 26rpx;
    color: #999;
    margin: 2rpx 0 0 10rpx;
  
  }
  .address-phone{
    font-size: 26rpx;
    color: #999;
    margin: 2rpx 0 0 10rpx;
  }
  .to_address{
    font-size: 28rpx;
    color: #666;
    line-height: 140rpx;
  }
  /* 商品 */
  .commodity-container{
    margin-top: 10px;
    background-color: #fff
  }
  .commodity-item{
    padding: 20rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #eeeeee
  }
  .commodity-item-img-wrap{
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx
  }
  .commodity-item-details{
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    font-size: 28rpx;
    color: #333
  }
  .commodity-item-guige{
    font-size: 24rpx;
    color: #999
  }
  .commodity-item-price-num{
    font-size: 26rpx
  }
  .commodity-item-price{
    color: var(--theme)
  }
  .commodity-express{
    font-size: 26rpx;
    padding: 20rpx;
  }
  .commodity-express text{
    margin-left:12rpx 
  }
  /* 共计 */
  .commodity-sum{
    font-size: 26rpx;
    padding: 20rpx;
    padding-top: 0;
    display: flex;
    justify-content: flex-end
  }
  .commodity-sum-all{
    color: #999;
    margin-right: 20rpx;
    font-size: 24rpx
  }
  .commodity-sum-price{
    color: var(--theme)
  }
  .discounts-container{
    margin-top: 20rpx
  }
  .discounts-container,.buyer-message{
    font-size: 26rpx;
    color: #333;
    padding:10rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    /* margin-bottom: 2rpx */
  }
  
  .order-information{
    padding: 10rpx 0;
    padding-bottom: 80rpx;
    font-size: 26rpx;
    color: #666;
    background-color: #fff
  }
  .order-information>view{
    padding:10rpx 20rpx;
    box-sizing: border-box
  }
  .input-wrap{
    margin-left: 20rpx
  }
  .input-wrap>input{
    width: 100%
  }
  /* 支付 */
  .operation{
    position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #fff;
      height: 120rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 34rpx;
      box-shadow: 0px -3px 0px 0px #FCC400;
      border-radius: 50rpx 50rpx 0px 0px;
      z-index: 1;
  }
  .operation .pay{
    height: 80rpx;
    width: 212rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
  }
  .popupbox{
    width: 600rpx;
    height:600rpx;
    background-color: white;
    border-radius: 20rpx;
  }
  .popuptop{
    width: 100%;
    height: 200rpx;
    background-repeat: no-repeat;
      background-size: 100% 100%;
  }
  .popuptext{
    width: 540rpx;
    padding: 30rpx;
  
    font-size: 28rpx;
    color: #888;
  }
  .check{
    padding-left:30rpx ;
   margin-bottom: 30rpx;
   color: #6bd66b;
  }
  .popupbutton{
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-around;
  }
  .b1{
    width: 180rpx;
    height: 80rpx;
    border: 1px solid #6bd66b;
    color: #6bd66b;
    text-align: center;
    line-height: 80rpx;
    border-radius: 40rpx;
  }
  .b2{
    width: 180rpx;
    height: 84rpx;
    background-color:#6bd66b;
    color: white;
    text-align: center;
    line-height: 84rpx;
    border-radius: 40rpx;
  }
  .xuanzebox{
    width: calc(92% - 80rpx);
    height: 400rpx;
    border-radius: 14rpx;
    margin: 30rpx auto 0;
    background-color: white;
    padding: 20rpx 40rpx;
  }
  .box{
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
  }
  .boxtext{
    font-size: 30rpx
  }
  .boxmoney{
    font-size: 28rpx;
    color: #FF9600;
  }
  .xuanze{
    width: 100%;
    height: 200rpx;
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;
  }
  .xuanzeicon{
    width: 180rpx;
    height: 180rpx;
    color: #ccc;
    font-size: 30rpx;
    text-align: center;
  border: 2px solid #C644F6;
  border-radius: 16rpx;
  position: relative;
  }
  .xuanzeicon1{
    width: 180rpx;
    height: 180rpx;
    color: #ccc;
    font-size: 30rpx;
    text-align: center;
  border: 2px solid #C646;
  border-radius: 16rpx;
  position: relative;
  }
  .qianbao{
    width: 120rpx;
    height: 120rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 10rpx auto 0;
  }
  .yuan{
    width: 40rpx;
    height: 40rpx;
    transform: translate3d(10rpx, 10rpx,10rpx);
    position: absolute;
    bottom:0;
    right: 0;
    color: white;
    text-align: center;
  border-radius: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  }
</style>
